<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>贷款计算器</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
</head>
<body>

<!-- 你的 HTML 代码 -->
<div class="layui-nav">
    <ul class="layui-nav layui-bg-green" style="text-align: center">
        <li class="layui-nav-item"><a id='commercialLoan_a'>商业贷款计算器</a></li>
        <li class="layui-nav-item"><a id="houseProvidentFundLoan_a">公积金贷款计算器</a></li>
        <li class="layui-nav-item"><a id="combinedLoan_a">组合贷款计算器</a></li>
    </ul>
</div>
<div class="layui-nav">
    <ul class="layui-nav layui-bg-green" style="text-align: center">
        <li class="layui-nav-item"><a href="{{ url_for('sydkjsq') }}">商业贷款计算器</a></li>
        <li class="layui-nav-item"><a href="{{ url_for('gjjdkjsq') }}">公积金贷款计算器</a></li>
        <li class="layui-nav-item"><a href="{{ url_for('zhdkjsq') }}">组合贷款计算器</a></li>
    </ul>
</div>

<form id="loan" class="layui-form" style="margin-top: 10px;width: 98%" action="">
    <!--    公积金贷款-->
    <div id="commercialLoan" style="display: none" class="layui-form-item">
        <div class="layui-form-item">
            <label class="layui-form-label">商业贷款 </label>
            <div class="layui-input-block">
                <input type="text" name="sydke" lay-verify="" placeholder="万元" autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">贷款期限</label>
            <div class="layui-input-block">
                <input type="text" name="sydkqx" lay-verify="" placeholder="年" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商代利率</label>
            <div class="layui-input-block">
                <input type="text" name="sydkll" lay-verify="" placeholder="%" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>


    <!--  商业贷款  -->
    <div id="houseProvidentFundLoan" style="display: none" class="layui-form-item">
        <div class="layui-form-item">
            <label class="layui-form-label">公积金贷款</label>
            <div class="layui-input-block">
                <input type="text" name="gjjdke" lay-verify="" placeholder="万元" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">贷款期限</label>
            <div class="layui-input-block">
                <input type="text" name="gjjdkqx" lay-verify="" placeholder="年" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公积金利率</label>
            <div class="layui-input-block">
                <input type="text" name="gjjdkll" lay-verify="" placeholder="%" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>


    <!--组合贷款-->
    <div id="combinedLoan" style="display: none" class="layui-form-item">
        <div class="layui-form-item">
            <label class="layui-form-label">商业贷款</label>
            <div class="layui-input-block">
                <input type="text" name="zsydk" lay-verify="" placeholder="万元" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公积金贷款</label>
            <div class="layui-input-block">
                <input type="text" name="zhjjdk" lay-verify="" placeholder="万元" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">贷款期限</label>
            <div class="layui-input-block">
                <input type="text" name="zdkqx" lay-verify="" placeholder="年" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商代利率</label>
            <div class="layui-input-block">
                <input type="text" name="zsydkll" lay-verify="" placeholder="%" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公积金利率</label>
            <div class="layui-input-block">
                <input type="text" name="zgjjdkll" lay-verify="" placeholder="%" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>

    <div id="tijiao" style="display: none" class="layui-form-item">
        <div class="layui-form-item">
            <label class="layui-form-label">还款方式</label>
            <div class="layui-input-block">
                <input type="radio" name="hkfs" value="1" checked title="等额本息">
                <input type="radio" name="hkfs" value="2" title="等额本金">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center">
                <button class="layui-btn" lay-submit lay-filter="formDemo">计算</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>


</form>
</body>
<script>
    layui.use(['jquery', 'layer', 'form', "element"], function () {

            /*  window.qh=function(num) {
                  sdata = {"num": num}
                  $.ajax({
                          type: 'POST',
                          url: '/qh',
                          cache: false,
                          data: JSON.stringify(sdata),  //将data参数值转为json格式字符串
                          contentType: "application/json;charset=utf-8",
                          async: false,
                          success:function (res){
                              layer.msg("访问成功")
                          }
                      }
                  );
              }
      */

            var layer = layui.layer, $ = layui.$, form = layui.form, element = layui.element;
            layer.ready(function () {
                $("#commercialLoan").show()
                $("#tijiao").show()
            });
            $("#commercialLoan_a").click(function () {

                $("#houseProvidentFundLoan").hide()
                $("#commercialLoan").show()
                $("#combinedLoan").hide()
                $("#loan")[0].reset()
            });
            $("#houseProvidentFundLoan_a").click(function () {
                $("#loan")[0].reset()
                $("#houseProvidentFundLoan").show()
                $("#commercialLoan").hide()
                $("#combinedLoan").hide()
                 $("#loan")[0].reset()
            });
            $("#combinedLoan_a").click(function () {
                $("#commercialLoan").hide()
                $("#houseProvidentFundLoan").hide()
                $("#combinedLoan").show()
                $("#loan")[0].reset()
            });
            form.on("submit(formDemo)", function (data) {
                console.log($("#commercialLoan").display != "none")
                if (($("#commercialLoan").display != "none" && data.field["sydke"].toString() === "") || ($("#houseProvidentFundLoan").display != "none" && data.field["gjjdke"].toString() === "") || ($("#combinedLoan").display != "none" && data.field["zhjjdk"].toString() === "")) {

                    layer.alert("请填写内容", {icon: 6})
                } else {
                    $.ajax({
                        url: "/loan_cl",  //提交请求的URL
                        type: "post",         //请求方式get,post,put,delete等
                        data: data.field,    //提交的表单数据
                        success: function (result) {
                            let jine = ""
                            if (data.field["sydke"] != "") {
                                jine = data.field["sydke"]
                            } else {
                                jine = data.field["gjjdke"]
                            }

                            let html = "贷款总额为:" + jine * 10000 + "&nbsp;还款总额为：" + result.data["totalpayment"] + "&nbsp;,其中总利息：" + result.data["interestpaid"] + ",&nbsp;每月还款额为：" + result.data["monthlypayment"] + "<br/>"
                            let html2 = ""
                            if (data.field["hkfs"] == 2) {
                                for (let i = 0; i < result.data["monthlypaymentlist"].length; i++) {
                                    html2 += " 第" + result.data["monthlypaymentlist"][i]["month"] + "期，基本还款金额为：" + result.data["monthlypaymentlist"][i]["monthly_payment"] + ",利息为" + result.data["monthlypaymentlist"][i]["interest"] +
                                        "总还款金额为：" + result.data["monthlypaymentlist"][i]["monthly_payment_interest"] + ",剩余还款金额为：" + result.data["monthlypaymentlist"][i]["remaining_principal"] + "<br/>"
                                }
                            }
                            if (data.field["sydke"] != "" && data.field["hkfs"] == 1) {
                                // {#商业贷款 等额本息#}
                                html = "商业" + html
                            } else if (data.field["sydke"] != "" && data.field["hkfs"] == 2) {
                                // {#商业贷款 等额本金#}
                                html = "商业" + html + "<br/>每月还款额度为：<br/>" + html2
                            } else if (data.field["gjjdk"] != "" && data.field["hkfs"] == 2) {
                                // {#公积金 等额本金#}
                                html = "公积金" + html + "<br/>每月还款额度为：<br/>" + html2
                            } else {
                                // {#公积金等额本息#}
                                html = "公积金" + html
                            }
                            // {#根据还款方式弹出内容  1  等额本息   2  等额本金#}
                            layer.open({
                                type: 1,
                                title: "还款计划",
                                area: ['800px', '800px'],
                                content: html
                            });
                        },
                        error: function (result) {
                            alert("接口错误！！！"); //无返回或处理有报错时弹框
                        }
                    });
                }
                return false;  // 别忘记这行，防止页面跳
            });
        }
    );


</script>
</html>